<template>
	<view class="my-header">
		<view class="top_bgimg" :style="'height:'+topBarHeight+'px;'">
			<view class="top_cont" :style="'height:'+ tabBarHeight+'px;margin-top:'+stateBarHeight+'px;'">
				<!-- <image v-if="isBack" src="/static/images/fanhui.png" @tap="gotoBack" mode="widthFix"></image> -->
				<slot></slot>
			</view>
		</view>
		<view :style="'height:'+topBarHeight+'px;'"></view>
	</view>
</template>

<script setup>
	import {
		onShow,
		onReady
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	let topBarHeight = ref(0) //状态栏加导航栏高度
	let stateBarHeight = ref(0) //导航栏高度
	let tabBarHeight = ref(0) //状态栏高度
	onMounted(() => {
		uni.getSystemInfo({
			success: function(res) {
				stateBarHeight.value = res.statusBarHeight
				// #ifdef MP-WEIXIN
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				let paddingSize = menuButtonInfo.top - stateBarHeight.value
				tabBarHeight.value = (menuButtonInfo.bottom - stateBarHeight.value) + paddingSize
				topBarHeight.value = menuButtonInfo.bottom + paddingSize
				// #endif

				// #ifdef APP-NVUE || APP-PLUS 
				let menuRect = wx.getMenuButtonBoundingClientRect()
				topBarHeight.value = menuRect.top + menuRect.height
				// #endif
				//向父组件传回头部高度
				// self.$emit("sendDefault", self.topBarHeight)
			},
		})
	})
</script>

<style lang="scss">
	.my-header {
		background: rgba(23, 174, 240, 1);
		.top_bgimg {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99999;
			background-size: 100%;
			color:#fff;
			font-size: 32rpx;
		}

		.top_cont {
			display: flex;
			align-items: center;
			padding: 20rpx;
			box-sizing: border-box;
		}

		.top_cont image {
			width: 36rpx;
			height: 34rpx;
			float: left;
			margin: 6rpx 10rpx 0 0;
		}
	}
</style>
